<?php /*a:2:{s:56:"/www/wwwroot/mall/public/template/mall/goods/detail.html";i:1628217010;s:64:"/www/wwwroot/mall/public/template/mall/../index/public/mlay.html";i:1624501447;}*/ ?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title><?php echo htmlentities((isset($page_title) && ($page_title !== '')?$page_title:config('app.web_site_title'))); ?></title>
		<meta name="keywords" content="<?php echo config('app.web_site_keywords'); ?>">
		<meta name="description" content="<?php echo config('app.web_site_description'); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, shrink-to-fit=no, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		
		<!-- Icons -->
		<link rel="icon" href="/static/images/favicon.ico">
		<!-- END Icons -->
		
		<!-- Stylesheets -->
		<link rel="stylesheet" href="/static/libs/weui/css/weui.min.css">
		<link rel="stylesheet" href="/static/libs/weui/css/common.css?v=<?php echo config('app.asset_version'); ?>">
		<link rel="stylesheet" href="/static/css/font/iconfont.css?v=<?php echo config('app.asset_version'); ?>">
		<!-- END Stylesheets -->
		
<style>
	.input {
		padding: 0.3rem 0.5rem;
		font-size: 0.8rem;
	}
	
	/* 圆角 */
	.br10 {
		border-radius: 10px;
	}
	
	.br30 {
		border-radius: 30px;
	}
	
	/* 外边距 */
	.mg5 {
		margin: 0.5rem;
	}
	
	.mgb {
		margin-bottom: 0.5rem;
	}
	
	.mgl10 {
		margin-left: 0.5rem;
	}
	
	/* 内边距 */
	.pd5 {
		padding: 0.5rem;
	}
	
	/* 宽度 */
	.w100 {
		width: 100%;
	}
	
	/* 字体颜色 */
	.col_red {
		color: red;
	}
	
	.col_c2 {
		color: #c2c2c2;
	}
	
	/* 字体大小 */
	/* 16px */
	.font_s16 {
		font-size: 0.8rem;
	}
	
	/* 背景色 */
	.bag38 {
		background: #38c8d0;
	}
	
	.bagbb {
		background: #bb9724;
	}
	
	.ral4 {
		border-top-left-radius: 36px;
		border-bottom-left-radius: 36px;
	}
	
	.rar4 {
		border-top-right-radius: 36px;
		border-bottom-right-radius: 36px;
	}
	
	/* 定位 */
	.fixed {
		position: fixed;
	}
	
	.bottom_0 {
		bottom: 0;
	}
	 .custom-indicator {
	    position: absolute;
	    right: 5px;
	    bottom: 5px;
	    padding: 2px 5px;
	    font-size: 12px;
	    background: rgba(0, 0, 0, 0.1);
	  }
	  .add-cart {
	  	border-radius: 30px;
	  	background: #a78928;
	  	text-align: center;
	  	color: #fff;
	  	margin: 0rem 3rem;
	  	padding: 0.5rem 2rem;
	  	font-size: 0.8rem;
	  }
	  .van-stepper--round .van-stepper__plus{
	  	background-color: #a78928 !important;
	  }
	  .van-stepper--round .van-stepper__minus{
	  	color: #a78928 !important;
	  	border: 1px solid #a78928 !important;
	  }
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="/template/static/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	</head>
	<body id="<?php echo htmlentities(strtolower(app('request')->app())); ?>-<?php echo htmlentities(strtolower(app('request')->controller())); ?>-<?php echo htmlentities(strtolower(app('request')->action())); ?>">
		<!-- Page Container -->
		<div class="page" id="main">
			
			
<div id="app">
			<!-- <div class="bagfff br30 mg5">
				<input @click="search" class="input" type="text" placeholder="请输入" id="" value="" />
			</div> -->
		<!-- 	<div>
				<img class="w100" src="/template/static/img/1.jpg">
			</div> -->
			<van-swipe @change="onChange" style="margin: 0.5rem;height: 200px;" :show-indicators='false' :autoplay="3000">
				<van-swipe-item v-cloak v-for="(list, index) in images" :key="index">
					<img v-cloak :src="list.image" >
				</van-swipe-item>
				 <template #indicator>
				    <div class="custom-indicator" style="color: #fff;" v-cloak>{{ current + 1 }}/{{images.length}}</div>
				  </template>
			</van-swipe>
			<div style="font-size: 0.7rem;" class="bagfff br10 mg5 pd5">
				<div class="" v-cloak>{{detail.title}}</div>
				<div class="col_red" v-cloak>￥{{detail.price}}</div>
<!--				<div class="col_red" v-cloak>￥{{detail.discount}}</div>-->
			</div>
			<div style="font-size: 0.7rem;" class="bagfff br10 mg5 pd5 font_s16">
				<div @click="showPopup" class="flex ju_sb ai_center mgb">
					<div>
						<span class="col_c2">选择</span>
						<span class="mgl10" v-cloak>{{box_number}}盒</span>
					</div>	
					<img style="width: 0.8rem;height: 0.8rem;" src="/template/static/img/my/rightThearrow.png">
				</div>
				<van-popup position="bottom" round lock-scroll :overlay="true" :close-on-click-overlay='true' :style="{ height: '40%' }" v-model="show2">
					<div v-show="show2" style="padding: 1rem 1rem;display: none;" class="">
						<div class="flex">
							<img style="width: 3rem;height: 3rem;border-radius: 10px;margin-right: 0.5rem;" v-cloak :src="images[0].image">
							<div>
								<div v-cloak>{{detail.title}}</div>
								<div style="color: #a78928;" v-cloak>{{detail.price}}元</div>
							</div>
						</div>
						<p style="padding: 0.5rem 0;">备注:<input v-model="note" type="text" placeholder="请输入" value="" /></p>	
						<van-stepper @change="stepper" v-model="box_number" theme="round" button-size="22" disable-input ></van-stepper>
					</div>
					<div @click="add" v-show="show2" class="add-cart" style="display: none;">
						添加购物车
					</div>
				</van-popup>
				<div class="flex ju_sb ai_center mgb">
					<div class="flex">
						<span class="col_c2">发货</span>
						<span style="flex: 1;" class="mgl10">满1000包邮(新疆满5000包邮)艾制品、物料均不包邮。</span>
					</div>
					<img style="width: 0.8rem;height: 0.8rem;" src="/template/static/img/my/rightThearrow.png">
				</div>
				<div class="flex ju_sb ai_center mgb">
					<div>
						<span class="col_c2">参数</span>
						<span class="mgl10">品牌:材质...</span>
					</div>
					<img style="width: 0.8rem;height: 0.8rem;" src="/template/static/img/my/rightThearrow.png">
				</div>
			</div>
			<div style="font-size: 0.7rem;" class="bagfff br10 mg5 pd5">
				<div class="">商品介绍</div>
			</div>
			<div class="bagfff br10 mg5 pd5">
				<div class="font_s16"><?php echo $detail['content']; ?></div>
			</div>
		
			<div class="bagfff w100 fixed bottom_0 flex ju_sb ai_center" style="padding: 0.2rem 0;">
				<div @click="kefu" class="tc" style="margin-left: 1rem;">
					<img style="width: 20px;height: 20px;" src="/template/static/img/my/my_service.png">
					<div style="font-size: 0.5rem;color: #999999;">客服</div>
				</div>
				<div class="flex" style="color: #fff;font-size: 0.8rem;margin-right: 1rem;">
					<div @click="showPopup" style="width: 100px;height: 35px;line-height: 35px;" class="bag38 ral4 tc">加入购物车</div>
					<div @click="immediately" style="width: 100px;height: 35px;line-height: 35px;" class="bagbb rar4 tc">立即购买</div>
				</div>
			</div>
		</div>

		</div>
		<!-- END Page Container -->
		<!-- FOOT -->
		
		<!-- Copyright -->
		<div class="weui-footer padding-tb">
			<!-- 		<p class="weui-footer__links">
	<a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
	</p> -->
			<p class="weui-footer__text"><?php echo config('app.web_site_copyright'); ?></p>
		</div>
		<!-- Copyright -->
		
		<div class="footer"></div>

		
		<ul id="Fixed">
			<li id="goTop" class="ico ico-up hidden" title="去顶部"></li>
		</ul>
		
		<!-- END FOOT-->
		<div class="hidden">
			
			<?php echo config('app.web_site_statistics'); ?>
			
		</div>
		<!--js -->
		<script src="/static/libs/weui/js/jquery.min.js"></script>
		<script src="/static/libs/weui/js/weui.min.js"></script>
		<script src="/static/libs/weui/js/common.js?<?php echo config('app.asset_version'); ?>"></script>
		
		<?php if(!(empty($jssdk) || (($jssdk instanceof \think\Collection || $jssdk instanceof \think\Paginator ) && $jssdk->isEmpty()))): ?>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script>
			wx.config({
				debug: false,
				appId: '<?php echo htmlentities($jssdk['appid']); ?>',
				timestamp: '<?php echo htmlentities($jssdk['timestamp']); ?>',
				nonceStr: '<?php echo htmlentities($jssdk['noncestr']); ?>',
				signature: '<?php echo htmlentities($jssdk['signature']); ?>',
				jsApiList: [
					'updateAppMessageShareData',
					'updateTimelineShareData',
					'hideMenuItems',
					'showMenuItems',
					'closeWindow',
				],
				openTagList: ['wx-open-launch-weapp']
			});
			wx.ready(function() {
				wx.updateAppMessageShareData({
					title: "<?php echo htmlentities((isset($share['title']) && ($share['title'] !== '')?$share['title']:config('app.web_site_title'))); ?>", // 分享标题
					desc: "<?php echo htmlentities((isset($share['desc']) && ($share['desc'] !== '')?$share['desc']:config('app.web_site_slogan'))); ?>", // 分享描述
					link: "<?php echo htmlentities((isset($share['url']) && ($share['url'] !== '')?$share['url']:$jssdk['url'])); ?>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: "<?php echo htmlentities((isset($share['img']) && ($share['img'] !== '')?$share['img']:app('request')->scheme() . '://' .app('request')->host() .'/static/images/share.png')); ?>", // 分享图标
					success: function() {
						// 设置成功
					}
				});
				wx.updateTimelineShareData({
					title:  "<?php echo htmlentities((isset($share['title']) && ($share['title'] !== '')?$share['title']:config('app.web_site_title'))); ?>", // 分享标题
					link: "<?php echo htmlentities((isset($share['url']) && ($share['url'] !== '')?$share['url']:$jssdk['url'])); ?>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: "<?php echo htmlentities((isset($share['img']) && ($share['img'] !== '')?$share['img']:app('request')->scheme() . '://' .app('request')->host() .'/static/images/share.png')); ?>", // 分享图标
					success: function() {
						// 设置成功
					}
				});
				<?php if(!(empty($share['hide']) || (($share['hide'] instanceof \think\Collection || $share['hide'] instanceof \think\Paginator ) && $share['hide']->isEmpty()))): ?>
				wx.hideMenuItems({
					menuList: ['menuItem:copyUrl', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:openWithQQBrowser',
						'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:favorite', 'menuItem:share:qq',
						'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
				});
				<?php endif; ?>
				wx.showMenuItems({
					menuList: ["menuItem:profile", "menuItem:addContact", ] // 要显示的菜单项，所有menu项见附录3
				});
			});
		</script>
		<?php endif; ?>
		
		
<!-- 引入vue.js文件使用vue开发 -->
<script src="/template/static/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="/template/static/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
		  return {
			show2: false,//加入购物车
			box_number:1,
			current: 0,
			detail: <?php echo json_encode($detail); ?>,//商品信息
			images: <?php echo json_encode($detail['images']); ?>,//很明显是图片:轮播图
			note: '',//备注
		  }
		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created: function() {
		},
		mounted() {
			console.log(this.detail);
	
		},
		methods: {
			onChange(index) {
			      this.current = index;
			    },
				click_choose: function() {
					console.log('选择')
				},
			search: function() {
				window.location.href = "search.html"
			},
			immediately: function() {
				var that = this
				console.log('立即购买')
				$.post("<?php echo url('mall/cart/add'); ?>", {
					gid: that.detail.id,
					nums: that.box_number,
					remark: that.note,
				}, function(res) {
					if(res.code == 1) {
						vant.Toast.success('添加成功');
						window.location.href = "<?php echo real_url('mall/cart/index'); ?>/id/" + that.detail.id
					} else {
						vant.Toast.fail(res.msg);
					}
					console.log(res);
				});
				
			},
			add_car: function() {
				window.location.href = "the_shopping_cart.html"
			},
			showPopup() {
			      this.show2 = true;
		    },
			add() {
				this.show2 = false;
			},
			stepper(e) {
				console.log(e);
			},
			add: function() {
				this.show2 = false
				$.post("<?php echo url('mall/cart/add'); ?>", {
					gid: this.detail.id,
					nums: this.box_number,
					remark: this.note,
				}, function(res) {
					if(res.code == 1) {
						vant.Toast.success('添加成功');
					} else {
						vant.Toast.fail(res.msg);
					}
					console.log(res);
				});
			},
			kefu() {
				vant.Dialog.confirm({
				  title: '客服电话',
				  message: "<?php echo app_config('mall', 'phone'); ?>",
				})
				  .then(() => {
				    // on confirm
					window.location.href = "tel:<?php echo app_config('mall', 'phone'); ?>"
				  })
				  .catch(() => {
				    // on cancel
				  });
			}
		}
	})
</script>

	</body>
</html>
